<template>
  <!-- <div v-if="peekInfo.content_id" :class="equ === 'pc' ? 'peek-back-pc' : 'peek-back'" class="peek-common"
    @click="goBack">
    <img src="@/assets/icons/pc/return.png" class="pic" />
    <div>返回主线</div>
  </div> -->
  <div
    v-if="peekHistory.content_id && equ === 'pc'"
    class="peek-common peek-up peek-back-pc"
    @click="goUp"
  >
    <img
      src="@/assets/icons/pc/return.png"
      class="pic"
    />
    <div>返回选择</div>
  </div>
  <div v-if="peekHistory.content_id && equ !== 'pc' && !isQa">
    <div
      class="peek-back flc relative"
      :class="{ 'no-controller': !ttsa.controller }"
    >
      <div class="z-2">
        <ControllerButton
          :is-back="true"
          class="peek-back-btn "
          :names="['', 'back']"
          :status="true"
          @click="goUp"
        ></ControllerButton>
      </div>
      <div
        class="peek-back-wrapper flc"
        :class="{ 'max-width': showText }"
        :style="{ '--x-r': `${maxWidth}vw` }"
        @click="toggleShow"
      >
        <div class="peek-back-content relative z-1">
          <div class="z-2 relative  flc">
            <div class="ml-5px truncate">{{ peekHistory.node_name }}</div>
            <span
              class="transform scale-70 w-25px h-22px"
              :class="{ 'transform-all': !showText }"
            >
              <icon-font
                name="back"
                class="text-white"
              />
              <icon-font
                name="back"
                class="text-white opacity-50 -ml-8px"
              />
            </span>
          </div>
        </div>
        <div class="flex-1"></div>
      </div>
    </div>
  </div>
</template>

<script
  lang="ts"
  setup
  name="Logo"
>
import { equ } from '../../../package-env'
import { useTtsaStore } from '@/store/ttsa'
import { MODE } from '@/constants/ttsa'

const ttsa = useTtsaStore()
const showText = ref(false)

const peekInfo = computed(() => ttsa.peekBackInfo)

const isQa = computed(() => ttsa.mode === MODE.QA)

const peekHistory = computed(() => ttsa.peekHistory)
let timer = null
let timerClose = null

// 计算最大宽度
const maxWidth = computed(() => {
  const width = (31 + (peekHistory.value.node_name.length) * 3.5)
  return width > 76 ? 76 : width
})

const goBack = () => {
  ttsa.next(ttsa.peekBackInfo)
}

const goUp = () => {
  ttsa.next(ttsa.peekHistory)
}

watch(() => ttsa.peekHistory.node_id, (v, o) => {
  if (v !== o) {
    if (timer) clearTimeout(timer)
    showText.value = false
    timer = setTimeout(() => {
      showText.value = true
      clearTimeout(timer)
      setBackContent()
    }, 1000 * 0.2)
  }
})

const setBackContent = () => {
  if (timerClose) clearTimeout(timerClose)
  timerClose = setTimeout(() => {
    showText.value = false
    clearTimeout(timerClose)
  }, 1000 * 4)
}

const toggleShow = () => {
  showText.value = !showText.value
  if (showText.value) {
    setBackContent()
  } else {
    clearTimeout(timerClose)
  }
}

</script>

<style scoped lang="scss">
.peek-common {
  @apply flex items-center justify-center backdrop-blur-5px backdrop-filter cursor-pointer z-1001;
  background: linear-gradient(135deg, rgba(233, 240, 255, 0.5) 0%, rgba(229, 237, 255, 0.2) 100%);
  box-shadow: 0px 2px 30px 0px rgba(25, 47, 87, 0.05);
  border-radius: 24px;
  border: 1px solid #E3EAF4;
  color: #3B5379;
  font-weight: 600;
}

.peek-back {
  @apply absolute;
  bottom: 130px;
  left: 4px;
  padding: 6px 9px;
  font-size: 10px;
  transition: all 0.6s ease;
  transform: translateY(0);

  .pic {
    width: 13px;
    height: 12px;
    margin-right: 2px;
  }
}

.no-controller {
  transform: translateY(80px);
}

.peek-back-pc {
  width: 151px;
  height: 42px;
  margin-top: 15px;
  border-radius: 20px;

  .pic {
    margin-right: 4px;
  }
}

.peek-up {
  // transform: translateY(120%);
}

.peek-back-btn {
  transform: scale(0.8);
}

.peek-back-content {
  position: relative;
  font-size: 12px;
  color: #265786;
  font-weight: 600;
  padding: 4px 10px 4px 10px;
  border-radius: 0 24px 24px 0;
  border: 1px solid rgb(220, 240, 252, 0.35);
  border-left: none;
  z-index: 2;
  overflow: hidden;

  &::before {
    @apply absolute backdrop-filter backdrop-blur-3px top-0 left-0 bottom-0 right-0 z-0;
    content: '';
    border-radius: 0 20px 20px 0;
  }

  &::after {
    @apply absolute top-0 left-0 bottom-0 right-0 z-1;
    content: '';
    background: url('@/assets/images/back-lg.png') no-repeat;
    background-size: cover;
  }

  .transform-all {
    transform: rotate(180deg) scale(0.7);
    display: inline-block;
  }
}

.peek-back-wrapper {
  transition: width 1s;
  -webkit-transition: width 1s;
  width: 30px;
  margin-left: -11px;
  z-index: 1;
}

.max-width {
  width: var(--x-r);

  .peek-back-content {
    padding: 4px 0px 4px 10px;
    // border: none;
    // border: 1px solid rgba(255, 255, 255, 0.3);
    // border-left: none;

    &::after {
      @apply absolute top-0 left-0 bottom-0 right-0 z-1;
      content: '';
      background: url('@/assets/images/back-lg.png') no-repeat;
      background-size: 100% 100%;
    }
  }

}
</style>